@charset "utf-8";
/* CSS Document */
/*清空边距 让盒子的大小和width相同*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/*取消斜体样式*/
em,
i{
	font-style: normal;
}
/*取消li前面的小点*/
li{
	list-style: none;
}
/*图片文字居中清楚下面白框*/
img{
	border: 0;/*照顾低版本浏览器*/
	vertical-align: middle;
}
/*鼠标变小手*/
button{
	cursor: pointer;
}
/*取消链接下划线*/
a{
	color: #666;
	text-decoration: none;
}
a:hover{
	color: #c81623;
}
/*文字样式*/
button,
input{
	font-family: Microsoft YaHei, Heiti SC, tahmo, arial, Hiragino Sans GB,"\588B\4F53",sans-serif;
}

body{
	/*css3抗锯齿处理*/
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
	font: 0.12rem/1.5 Microsoft YaHei, Heiti SC, tahmo, arial, Hiragino Sans GB,"\588B\4F53",sans-serif;
	color: #666;
}
/*清除浮动*/
.clearfix::after{
	visibility: hidden;
	clear: both;
	display: block;
	content: "";
	height: 0;
}

.clearfix{
	*zoom: 1;
}



/*
正式内容
 */

/*
清除矢量图片颜色
 */
svg{
    fill: currentColor;   
    }
path{
    fill: unset;
}
body{
	background-color: rgb(205,205,205);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.header{
	width: 100%;
	height: 0.3rem;
	background:rgb(52,49,50);
	line-height: 0.3rem;
	color: rgb(210,203,200);
	display: flex;
	justify-content: center;
	align-items: center;
}
.search{
	width: 61.8%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.search>input{
	width: 61.8%;
	height: 0.18rem;
	font-size: 0.1rem;
	border-radius: 0.05rem;
	border: none;
	outline: none;
	padding: 0 0.03rem;
}
.type{
	position: absolute;
	left: 0.05rem;
	top: 0.05rem;
}
.icon {
	width: 0.2rem;
	height: 0.2rem;
	vertical-align: -0.15rem;
	fill: currentColor;
	overflow: hidden;
	font-size: 0.2rem;
	color: white;
}

.main{
	width: 61.8%;
}
.todo h3{
	height: 0.2rem;
	line-height: 0.2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0.1rem 0;
}
.todo .num{
	width: 0.2rem;
	height: 0.2rem;
	line-height: 0.2rem;
	font-size: 0.1rem;
	text-align: center;	
	border-radius: 0.1rem;
	background-color: rgb(233,230,245);
}
.todo .todoItem{
	display: flex;
	align-items: center;

	line-height: 0.2rem;
	margin: 0.05rem 0;
	border-left:0.03rem solid rgb(174,174,174);
	border-radius: 0.05rem;	
	background-color: white;

}
.todo .todoItem>input{
	height: 0.13rem;
	width: 0.13rem;
	margin: 0 0.05rem;
	flex: 0 0 auto;
}
.todo .todoItem .content{
	flex-grow: 1;
}
.todo .todoItem .del{
	margin: 0.025rem;
	width: 0.15rem;
	height: 0.15rem;
	line-height: 0.15rem;
	text-align: center;	
	border-radius: 0.075rem;
	background-color: rgb(233,230,245);
	flex: 0 0 auto;
}

.done.todo .todoItem{
	opacity: 0.3;
}